<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    :class="{'mobile-el-dialog mobile-el-dialog-form': showMobilePage}"
    class="global-dailog-style resource-log"
  >
    <div v-loading="loading" class="body-form">
      <Title :title="'状态变更日志'" font-size="16px" style="margin-bottom: 12px;"/>
      <el-table
        v-if="list.items.length"
        ref="tableRef"
        :data="list.items"
        :max-height="maxHeight"
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        hightlight-current-row>
        <el-table-column align="left" label="状态" min-width="200">
          <template slot-scope="scope">
            <div class="flex-center" >
              <div v-if="!isEmpty(scope.row.originStatus)" :style="getStyle(scope.row.originStatus)" class="dot-box">
                {{ scope.row.originStatus | journalStatusFilter }}
              </div>
              <img v-if="!isEmpty(scope.row.originStatus) && !isEmpty(scope.row.newStatus)" :src="changeIcon" class="change-icon">
              <div v-if="!isEmpty(scope.row.newStatus)" :style="getStyle(scope.row.newStatus)" class="dot-box">
                {{ scope.row.newStatus | journalStatusFilter }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="变更原因" min-width="160">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.reason" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="变更人员">
          <template slot-scope="scope">
            <CheckUserInfo v-if="scope.row.operatorId" :user-id="scope.row.operatorId" :label="scope.row.operator" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="变更时间" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="format(scope.row.changeTime,'YYYY/MM/DD HH:mm')" />
          </template>
        </el-table-column>
      </el-table>
      <EmptyPlaceholder v-else style="margin-bottom: 24px" />
      <el-row type="flex" justify="end">
        <el-pagination
          v-show="list.total > 0"
          :current-page.sync="page"
          :page-size="perPage"
          :total="list.total"
          :small="showMobilePage"
          :page-sizes="[10, 20, 50, 100, 250, 500]"
          :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { format } from '@/filters/date';
import { getJournalStatusLog } from '@/api/resource';
import { journalStatusFilter } from '@/utils/const/resouce';
import mobileTable from '@/mixins/mobileTable';
import { mapState } from 'vuex';
import changeIcon from '@/assets/medium/change.png';

export default {
  components: {
    Title,
    EmptyPlaceholder
  },
  filters: { journalStatusFilter },
  mixins: [mobileTable],
  data() {
    return {
      changeIcon,
      dialogVisible: false,
      journalStatus: [1],
      list: {
        items: [],
        total: 0
      },
      id: null,
      page: 1,
      perPage: 10,
      maxHeight: 540,
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    format,
    fetchData(reset) {
      if (reset) this.page = 1;
      this.loading = true;
      getJournalStatusLog(this.id, { page: this.page, perPage: this.perPage }).then(res => {
        this.list = res.data;
        this.loading = false;
      }).catch(_ => {
        this.loading = false;
      });
    },
    openDialog(id) {
      this.dialogVisible = true;
      this.id = id;
      this.fetchData(true);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    isEmpty(status) {
      return !status && status !== 0;
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    getStyle(status) {
      const isJournal = this.journalStatus.includes(status);
      return {
        background: isJournal ? '#E2F8F2' : '#FFE8EA',
        color: isJournal ? '#31CC9C' : '#FF4E5F'
      };
    }
  }
};
</script>
<style  lang="scss" scoped>
.resource-log {
  ::v-deep {
    .el-dialog, .el-dialog__body {
      width: 960px;
      max-height: 640px;
    }
    .el-dialog__body {
      padding: 16px 24px 24px !important;
    }
  }
  .body-form {
    @include scrollBar($x: hidden, $y: auto, $width: 6px);
  }
  .dot-box {
    display: flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 14px;
  }
  .el-icon-right {
    margin: 0 5px;
    color: #333;
  }
  .change-icon {
    width: 80px;
    height: 26px;
    margin: 0 8px;
  }
}
</style>

